<template>
  <el-card style="margin-bottom: 20px">
    <div id="dialog">
      <div id="dia-modifyUserInfo">
        <el-dialog title="个人信息" :visible.sync="dialogModifyUserInfo">
          <el-form :model="userInfoForm">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input
                v-model="userInfoForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input
                v-model="userInfoForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
             <el-form-item label="企业名称" :label-width="formLabelWidth">
              <el-input
                v-model="userInfoForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业名称" :label-width="formLabelWidth">
              <el-select
                v-model="userInfoForm.companyName"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogModifyUserInfo = false">取 消</el-button>
            <el-button type="primary"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
    <div slot="header" class="clearfix">
      <span>About me</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="modifyUserInfo"
        >编辑个人信息</el-button
      >
    </div>

    <div class="user-profile">
      <div class="box-center">
        <pan-thumb
          :image="user.avatar"
          :height="'100px'"
          :width="'100px'"
          :hoverable="false"
        >
          <div>Hello</div>
          {{ user.roles }}
        </pan-thumb>
      </div>
      <div class="box-center">
        <div class="user-name text-center">{{ user.name }}</div>
        <div class="user-role text-center text-muted">{{ user.roles }}</div>
      </div>
    </div>

    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="education" /><span>个人介绍</span>
        </div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            {{ user.roles}}
          </div>
        </div>
      </div>

      <div class="user-skills user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="skill" /><span>企业信息</span>
        </div>
        <div class="user-bio-section-body">
          <el-card shadow="always" v-show="showMainCompanyInfo">
           <h3 style="height: 20px">{{ user.companyInfo.companyName }}</h3>
            <el-tag>{{ user.companyInfo.departmentName
            }}</el-tag>
          </el-card>
        </div>
        <div id="sonCompanyInfo" v-show="showSonCompanyInfo">
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import PanThumb from "@/components/PanThumb";
export default {
  components: { PanThumb },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: "",
          email: "",
          avatar: "",
          roles:[],
          role: "",
          introduction: "",
          roleName: "",
          SubsidiaryInfo: [],
          gradeName: "",
          grade: Number,
        };
      },
    },
  },
  data() {
    return {
      dialogModifyUserInfo: false,
      formLabelWidth: "120px",
      userInfoForm: {},
      showMainCompanyInfo: true,
      showSonCompanyInfo:false,
    };
  },
  watch: {
    user(val) {
    }
  },
  methods: {
    modifyUserInfo(){
      this.dialogModifyUserInfo=true;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
